<!-- 个人中心 -->
<template>
	<view class="personal-wrap">
		<view class="top-info">
			<view class="info">
				<view class="left" @click="handleInfo">
					<view class="head-img">
						<image mode="aspectFill" style="width: 152rpx;height: 152rpx;" :src="user.avatar">
						</image>
					</view>
					<view class="name-phone" style="margin-top: 20rpx;">
						<view class="name"> {{user.nickname || ''}} </view>
						<view class="phone" style="margin-top: 24rpx;"> {{user.mobile_hidden || ''}} </view>
					</view>
				</view>
				<!-- <u-icon name="arrow-right" color="#fff" size="28"></u-icon> -->
				<!-- <view class="right" @click="xiaoxi">
					<view class="point" v-if="user.is_read"></view>
					<image style="width: 48rpx;height: 48rpx;" src="../../static/images/xiaoxi.png"></image>
				</view> -->
			</view>
			<view class="coupons">
				<view class="coupons1" @click="handleToGwj">
					<view class="num">{{user.gouwu_money}}</view>
					<view class="text">购物金</view>
				</view>
				<view class="coupons1" @click="handleToDjj">
					<view class="num">{{user.daijin_money}}</view>
					<view class="text">代金券</view>
				</view>
				<view class="coupons1" @click="handleToYhq">
					<view class="num">{{user.youhui_money}}</view>
					<view class="text">优惠券</view>
				</view>
				<view class="coupons1" @click="handleToMb">
					<view class="num">{{user.mibao}}</view>
					<view class="text">我的米包</view>
				</view>
			</view>
		</view>

		<view class="order">
			<view class="top">
				<view class="h2"> 购物订单 </view>
				<view class="more" @click="$Router.push({ path: '/pages/order/list', query:{type:'all'} })">
					全部订单
					<u-icon name="arrow-right" size="28"></u-icon>
				</view>
			</view>
			<view class="order-box">
				<view class="" @click="$Router.push({ path: '/pages/order/list', query:{type:'nopay'} })">
					<image class="order-img" src="../../static/images/Group2289.png" mode=""></image>
					<text>待付款</text>
				</view>
				<view class="" @click="$Router.push({ path: '/pages/order/list', query:{type:'nosend'} })">
					<image class="order-img" src="../../static/images/Group2287.png" mode=""></image>
					<text>待发货</text>
				</view>
				<view class="" @click="$Router.push({ path: '/pages/order/list', query:{type:'noget'} })">
					<image class="order-img" src="../../static/images/Group2286.png" mode=""></image>
					<text>待收货</text>
				</view>
				<!-- <view class="" @click="$Router.push({ path: '/pages/order/after-sale/list' })">
					<image class="order-img" src="../../static/images/Group 2288.png" mode=""></image>
					<text>退款/售后</text>
				</view> -->
				<view class="" @click="$Router.push({ path: '/pages/order/list', query:{type:'affte_sale'} })">
					<image class="order-img" src="../../static/images/Group2288.png" mode=""></image>
					<text>退款/售后</text>
				</view>


			</view>
		</view>

		<view class="list">
			<!-- <view class="item">
        <view class="text"> 我的钱包 </view>
        <u-icon name="arrow-right" color="#C8C8C8" size="28"></u-icon>
      </view> -->
			<view class="item" @click="goPage('pages/index/collect')">
				<image class="iconImg" src="../../static/images/Frame1.png" mode=""></image>
				<view class="text"> 我的收藏 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
			<view class="item" @click="goPage('pages/index/footprint')">
				<image class="iconImg" src="../../static/images/Frame2.png" mode=""></image>
				<view class="text"> 我的足迹 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
			<view class="item" @click="goPage('pages/user/address/list')">
				<image class="iconImg" src="../../static/images/Frame3.png" mode=""></image>
				<view class="text"> 收货地址 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
			<view class="item" @click="goPage('pages/index/invoiceManage')">
				<image class="iconImg" src="../../static/images/Frame4.png" mode=""></image>
				<view class="text"> 发票管理 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
			<view class="item" @click="goPage('pages/index/qrCode')">
				<image class="iconImg" src="../../static/images/Frame5.png" mode=""></image>
				<view class="text"> 我的二维码 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
			<view class="item" @click="goPage('pages/index/consumptionDetail')">
				<image class="iconImg" src="../../static/images/Frame6.png" mode=""></image>
				<view class="text"> 商邦消费明细 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
		</view>

		<view class="list">
			<view class="item" @click="goPage('pages/index/setPaymentCode')">
				<image class="iconImg" src="../../static/images/Frame7.png" mode=""></image>
				<view class="text"> 支付密码设置 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
			<button class="item" open-type="contact">
				<image class="iconImg" src="../../static/images/Frame8.png" mode=""></image>
				<view class="text"> 在线客服 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</button>
			<view class="item" @click="goPage('pages/index/feedback')">
				<image class="iconImg" src="../../static/images/Frame9.png" mode=""></image>
				<view class="text"> 意见反馈 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
			<view class="item"  @click="toxieyi()">
				<image class="iconImg" src="../../static/images/Frame10.png" mode=""></image>
				<view class="text"> 用户协议 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
			<view class="outLogin" @tap="showModal = true"> 退出账号 </view>
		</view>

		<u-modal ref="uModal" v-model="showModal" :show-cancel-button="true" confirm-color="#F54141"
			cancel-color="#666666" @confirm="confirmLogOut" content="确定退出登录？"></u-modal>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				showModal: false,
				user: {}
			};
		},
		onLoad() {
			// this.userInfoObject()
			console.log()
		},
		onShow() {
			this.userInfoObject()
		},
    computed: {
      ...mapGetters(['initShop']),
    },
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'logout']),
			// 用户信息
			userInfoObject() {
				this.getUserInfo(uni.getStorageSync('token')).then(res => {
					this.user = res
					console.log('user', this.user)
				})
			},
			// 退出登录
			confirmLogOut() {
				this.logout();
				uni.navigateTo({
					url: `/pages/index/login`
				});
				this.$store.dispatch('showAuthModal', 'toLogin');
			},
			handleInfo() {
				uni.navigateTo({
					url: `/pages/index/userInfo`
				});
			},
			xiaoxi() {
				uni.navigateTo({
					url: `/pages/index/message`
				});
			},
			handleToGwj() {
				uni.navigateTo({
					url: `/pages/index/money`
				});
			},
			handleToDjj() {
				uni.navigateTo({
					url: `/pages/index/vouchers`
				});
			},
			handleToYhq() {
				uni.navigateTo({
					url: `/pages/index/youhuiquan`
				});
			},
			handleToMb() {
				uni.navigateTo({
					url: `/pages/index/mibao`
				});
			},
			goPage(path) {
				uni.navigateTo({
					url: path
				});
			},
      toxieyi(){
        uni.navigateTo({
          url: `/pages/public/richtext?id=${this.initShop.user_protocol || 0}`
        });
      },
		},
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.personal-wrap {
		padding-bottom: 100rpx;

		.top-info {
			height: 620rpx;
			width: 750rpx;
			// background: #fe6766;
			// background-image:url('https://duomi.bigchun.com/images/beijing.png');
			background: url();

			.info {
				display: flex;
				align-items: center;
				padding: 30rpx;
				padding-top: 100rpx;
				justify-content: space-between;

				.left {
					margin-top: 100rpx;
					display: flex;
					color: #fff;

					.head-img {
						width: 152rpx;
						height: 152rpx;
						overflow: hidden;
						border-radius: 50%;
						margin-right: 25rpx;
					}
				}

				.right {
					margin-top: 130rpx;
					position: relative;

					.point{
						position: absolute;
						width: 10rpx;
						height: 10rpx;
						border-radius: 5rpx;
						background: #ffd86a;
						right: 4rpx;
						top: 4rpx;
					}

					/deep/ .u-icon__icon {
						color: #fff !important;
					}
				}
			}

			.coupons {
				display: flex;
				padding: 30rpx;
				justify-content: space-between;

				>view {
          width: 180rpx;
          color: #fff;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.num {
						font-size: 40rpx;
						margin-bottom: 10rpx;
            width: 100%;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
					}

					.text {
						font-size: 24rpx;
					}
				}
			}
		}

		.order {
			width: 690rpx;
			height: 252rpx;
			padding: 20rpx;
			background-color: #fff;
			margin: auto;
			border-radius: 20rpx;
			margin-top: -80rpx;

			.top {
				display: flex;
				justify-content: space-between;
				padding-top: 20rpx;

				.h2 {
					color: #333;
					font-size: 32rpx;
					font-weight: 500;
				}

				.more {
					color: #999;

					/deep/ .u-icon__icon {
						color: #999 !important;
					}
				}
			}

			.order-box {
				display: flex;
				justify-content: space-around;
				margin-top: 24rpx;

				>view {
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				.order-img {
					width: 72rpx;
					height: 72rpx;
					margin-bottom: 10rpx;
				}
			}
		}

		.list {
			background-color: #fff;
			border-radius: 20rpx;
			width: 690rpx;
			margin: 40rpx auto;

			.item {
				position: relative;
				height: 108rpx;
				display: flex;
				padding: 0 20rpx;
				// justify-content: space-between;
				align-items: center;
				background-color: #fff;
			}

			.text {
				font-weight: 500;
				font-size: 32rpx;
				padding-left: 10rpx;
				color: #5d5858;
			}

			.jiantou {
				position: absolute;
				right: 32rpx;
			}
		}

		.outLogin {
			width: 690rpx;
			height: 80rpx;
			background: #fff;
			margin: 40rpx auto;
			color: #fc5351;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.iconImg {
			width: 32rpx;
			height: 32rpx;
		}
	}

	button::after {
		border: initial;
	}
</style>
